<template>
  <div class="singleQueryPerson">
    <div class="gp-top">
      <div class="top-title">
        <div class="t-flag"></div>
        <div class="t-text">查询</div>
      </div>
      <div class="top-search">
        <div class="s-box">
          <div class="b-account">
            <span class="a-title">项目:</span>
            <el-select v-model="selectProject" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.project_name"
                :value="item.id">
              </el-option>
            </el-select>
            <el-button class="a-search" @click="handleSearch()">搜索</el-button>
<!--            <el-button class="a-export">导出</el-button>-->
          </div>
        </div>
      </div>
    </div>
    <div class="single-content">
      <div class="bottom-title">
        <div class="t-flag"></div>
        <div class="t-text">你要查询的会员是:</div>
      </div>
      <div class="current-title">当前选择的项目:<span style="color: #2A4BF0;">{{currentSelectPro}}</span></div>
      <div class="bottom-content-chaPerson">
        <process-tree :singleList=" singleLeaderList" ></process-tree>
      </div>
    </div>
  </div>
</template>

<script>
  import ProcessTree from '@/components/SingleProcessTree'

  export default {
    name: "SingleQueryPerson",
    data() {
      return {
        singleLeaderList: [],
        options:[
          {
            id:'',
            project_name:''
          }
        ],
        selectProject:'',
        currentSelectPro:"尚未选择"
      }
    },
    components: {
      ProcessTree
    },
    mounted() {
      this.getGroupLeaderList(),
      this.getProjectList()
    },
    methods: {
      //获取某一个领导下的团队
      getGroupLeaderList(){
        const loading=this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          mobile:this.$route.query.account
        }
        this.$api.GroupLeaderSearch(data).then((res)=>{
          if(res.data.list){
            this.singleLeaderList=[]
            this.singleLeaderList.push(res.data.list)
          }else{
            this.$message.error(res.data.info)
          }
          loading.close()
        },(err)=>{
          this.$message.error(err.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      //获取项目列表
      getProjectList(){
        this.$api.ProjectList().then((res)=>{
          if(res.data.length!==0){
            this.options=res.data
          }
        },(err)=>{
          this.$message.error(err.msg)
        })
      },
      //根据项目筛选
      handleSearch(){
        const loading=this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        })
        let data={
          mobile:this.$route.query.account,
          project_id:this.selectProject
        }
        this.$api.GroupLeaderSearch(data).then((res)=>{
          if(res.data.list){
            this.singleLeaderList=[]
            this.singleLeaderList.push(res.data.list)
          }else{
            this.$message.error(res.data.info)
          }
          loading.close()
        },(err)=>{
          this.$message.error(err.msg)
        })
        setTimeout(()=>{
          loading.close()
        },10000)
      },
      handleChange(item){
        console.log(item)
        this.options.forEach((pro)=>{
          if(item===pro.id){
            this.currentSelectPro=pro.project_name
          }
        })
      }
    }
  }
</script>

<style scoped lang="less">
  .singleQueryPerson {
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    overflow: auto;
    .gp-top{
      width: 100%;
      background-color: #ffffff;
      .top-title{
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;
        border-bottom: solid 1px #EEEEEE;
        .t-flag{
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }
        .t-text{
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }
      .top-search{
        box-sizing: border-box;
        padding: 20px 40px 20px 40px;
        .s-box{
          width: 100%;
          background-color: #F8F8F8;
          .b-account{
            text-align: left;
            position: relative;
            padding: 7px 10px;
            border-radius: 5px;
            box-sizing: border-box;
            .a-title{
              font-size: 14px;
              color: #323232;
            }
            input{
              width: 200px;
              height: 30px;
              font-size: 14px;
              padding: 5px 10px;
              box-sizing: border-box;
              border: solid 1px #DFE2E7;
              border-radius: 3px;
            }
            .a-search{
              margin-left: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
            .a-export{
              position: absolute;
              right: 20px;
              width: 80px;
              height: 30px;
              padding: 0;
              line-height: 30px;
            }
          }
        }
      }
    }
    .single-content{
      /*height: 100%;*/
      margin-top: 10px;
      background-color: #ffffff;
      .bottom-title {
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 30px;
        box-sizing: border-box;

        .t-flag {
          width: 3px;
          height: 15px;
          background-color: #2A4BF0;
        }

        .t-text {
          padding-left: 10px;
          font-size: 16px;
          color: #323232;
        }
      }
      .current-title{
        text-align: left;
        padding-left: 43px;
      }
      .bottom-content-chaPerson{
        padding: 20px 40px 40px 30px;
        text-align: left;

      }
    }

  }
</style>

